<template>
	<view class="count">
		<div class="bgTu">

			<image :src="obj.book.cover" class="img" mode=""></image>

		</div>
		<view class="bot m-t-40 p-20">
			<view class="name m-b-40">
				{{obj.book.name}}
			</view>
			<view class="botTit">
				书籍作者：{{obj.book.author}}
			</view>
			<view class="botTit">
				书籍出版社：{{obj.book.press}}
			</view>
			<view class="botTit">
				书籍所属丛书：{{obj.book.series}}
			</view>
			<view class="botTit">
				ISBN码：{{obj.book.isbn}}
			</view>
			<view class="botTit">
				书籍编号：{{obj.stock.book_no}}
			</view>
		</view>
		<view class="Books f  f-j-b p-20 ">
			<view style="width: 150rpx;" class="features">
				书籍面貌
			</view>
			<view style="margin-bottom: 40rpx;" class="right f f-a-c f-w-w">
				<view @click="qiehuan(item,index+1)" v-for="(item,index) in book_appearances" :key="index"
					style="margin-right: 20rpx;margin-bottom: 20rpx;" class="leftImg f f-a-c ">
					<image src="/static/gou.png" v-if="ind==index+1" class="img m-r-10" mode=""></image>
					<image src="/static/weigou.png" v-else class="img m-r-10" mode=""></image>
					<view class="good">
						{{item.name}}
					</view>
				</view>
				<!-- <view @click="ind=2" class="rightImg f f-a-c m-l-30">
					<image src="/static/gou.png" v-if="ind==2" class="img m-r-10" mode=""></image>
					<image src="/static/weigou.png" v-else class="img m-r-10" mode=""></image>
					<view class="good">
						损坏
					</view>
				</view> -->
			</view>
		</view>
		<view @click="Confirm" class="Confirm">
			确认归还
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				content: '是否确认核销',
				show: false,
				ind: 1,
				obj: {},
				code: '',
				book_appearances: uni.getStorageSync('setup').book_appearances
			}
		},
		onLoad(options) {
			this.obj = JSON.parse(options.obj)
			this.code = uni.getStorageSync('code')
		},
		methods: {
			// 确认核销
			async Confirm() {
				let n = await this.$api.Offset({
					content: this.code,
					book_appearance_id: this.book_appearances[this.ind - 1].id
				})

				if (n.status) {
					this.$msg('核销成功')
					setTimeout(() => {
						uni.navigateBack()
					}, 1000)
				} else {
					this.$msg(n.message)
				}
			},
			qiehuan(item, index) {
				this.ind = index
			},
			// 点击确认
			confirmFn(e) {
				console.log(e, '123');
			}
		}
	}
</script>

<style lang="scss" scoped>
	.Confirm {
		position: fixed;
		bottom: 150rpx;
		width: 90%;
		left: 5%;
		width: 690rpx;
		height: 88rpx;
		line-height: 85rpx;
		background: #009d85;
		border-radius: 44rpx;
		font-size: 30rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		text-align: center;
		color: #ffffff;
	}

	.Books {
		margin-top: 50rpx;
	}

	.good {
		font-size: 26rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		color: #666666;
	}

	.img {
		width: 32rpx;
		height: 32rpx;
	}

	.name {
		font-size: 32rpx;
		font-family: PingFang SC, PingFang SC-Bold;
		font-weight: 700;
		color: #333333;
	}

	.botTit {
		font-size: 28rpx;
		font-family: PingFang SC, PingFang SC-Regular;
		font-weight: 400;
		margin: 10rpx 0;
		color: #666666;
	}

	.bgTu {
		width: 100%;
		height: 514rpx;

		.img {
			width: 100%;
			height: 100%;
			object-fit: cover;
		}
	}

	.count {
		width: 100%;
		height: 100vh;
		background-color: #fff;
	}
</style>